<template>
  <div>
    <Icon type="md-arrow-back" size="41" @click="back"/>
    <swiper :options="swiperOption" class="swiper-wrap" name="1" ref="mySwiper" v-if="goodsAttachmentEntityList.length!=0">
      <swiper-slide v-for="(item,index) in goodsAttachmentEntityList" :key="index" >
        <p v-if="item.type == 'GOODS_BANNER'">
        <img :src="item.url" alt="" width="100%" height="100%"/>
        </p>
        <p v-if="item.type == 'GOODS_VIDEO'">
          <video :src="item.url" controls="controls" width="100%" height="100%">视频</video>
        </p>
      </swiper-slide>
      <!-- 常见的小圆点 -->
      <div class="swiper-pagination"  v-for="(item,index) in goodsAttachmentEntityList" :key="index" slot="pagination" ></div>
    </swiper>


  </div>
</template>
<script>
  import {goodsDetail} from '@/request/goodsRequest';

  export default {

    data() {
      const that = this;
      return {
        images: [],
        context: '',
        title: '',
        video: '',
        goodsAttachmentEntityList: [],
        swiperOption: {
          //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          //循环
          loop: false,
          //设定初始化时slide的索引
          initialSlide: 0,
          //自动播放
          // autoplay: {
          //   delay: 1500,
          //   stopOnLastSlide: false,
          //   /* 触摸滑动后是否继续轮播 */
          //   disableOnInteraction: false
          // },
          //滑动速度
          speed: 800,
          //滑动方向
          direction: "horizontal",
          //小手掌抓取滑动
          grabCursor: true,
          on: {
            //滑动之后回调函数
            slideChangeTransitionStart: function() {
              /* realIndex为滚动到当前的slide索引值 */
              that.imgIndex= this.realIndex+1;
            },
          },
          //分页器设置
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: "bullets"
          }
        }
      };
    },
      activated(){

      },
      created(){
        if (this.$route.query.id) {
          console.log(this.$route.query.id);
          this.getDataList();
        }
      },
      methods: {
        getDataList()
        {
          goodsDetail(this.$route.query.id).then(res => {
            // this.images = res.data.goods.images;
            // this.context = res.data.goods.context;
            this.goodsAttachmentEntityList = res.data.data.goodsAttachmentEntityList;
            this.title = res.data.data.title;
            // this.video = res.data.goods.video;
          })
        },
        back(){
          this.$router.back();
        }
      }
  }
</script>
<style>
  .swiper-slide {
    width: 100%;
    height: 100%;
    text-align: center;
  }
</style>
